<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>血染钟楼AI角色展示</title>
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- 自定义Tailwind配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#6C1CD3',
                        secondary: '#D90429',
                        dark: '#1A1A2E',
                        light: '#F5F5F5',
                        accent: '#FFD700'
                    },
                    fontFamily: {
                        gothic: ['Cinzel', 'Playfair Display', 'serif'],
                        sans: ['Inter', 'sans-serif']
                    },
                    animation: {
                        'fade-in': 'fadeIn 1s ease-in-out',
                        'slide-up': 'slideUp 0.5s ease-out',
                        'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite'
                    },
                    keyframes: {
                        fadeIn: {
                            '0%': { opacity: '0' },
                            '100%': { opacity: '1' }
                        },
                        slideUp: {
                            '0%': { transform: 'translateY(20px)', opacity: '0' },
                            '100%': { transform: 'translateY(0)', opacity: '1' }
                        }
                    }
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .text-shadow {
                text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
            }
            .text-shadow-lg {
                text-shadow: 4px 4px 8px rgba(0, 0, 0, 0.8);
            }
            .bg-blur {
                backdrop-filter: blur(8px);
            }
            .scrollbar-hide::-webkit-scrollbar {
                display: none;
            }
            .scrollbar-hide {
                -ms-overflow-style: none;
                scrollbar-width: none;
            }
            .card-hover {
                transition: all 0.3s ease;
            }
            .card-hover:hover {
                transform: translateY(-5px);
                box-shadow: 0 10px 25px -5px rgba(108, 28, 211, 0.4);
            }
            .glass-effect {
                background: rgba(255, 255, 255, 0.1);
                border: 1px solid rgba(255, 255, 255, 0.2);
                box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
                backdrop-filter: blur(4px);
            }
        }
    </style>
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;800&family=Inter:wght@300;400;600;800&family=Playfair+Display:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">
</head>
<body class="bg-dark text-light min-h-screen">
    <!-- 导航栏 -->
    <header class="fixed top-0 left-0 right-0 z-50 bg-dark bg-opacity-90 bg-blur border-b border-primary border-opacity-30">
        <nav class="container mx-auto px-4 py-3 flex items-center justify-between">
            <div class="flex items-center space-x-2">
                <img src="https://p3-flow-imagex-sign.byteimg.com/tos-cn-i-a9rns2rl98/rc/pc/super_tool/efed249705d0402b84af890f3ddf5ee8~tplv-a9rns2rl98-image.image?rcl=20250926100843958069DFA3C52CAADAF1&rk3s=8e244e95&rrcfp=f06b921b&x-expires=1761444570&x-signature=1%2F9%2FTj6bb%2BWvKw6TtH6WboXA%2BBs%3D" alt="Logo" class="w-10 h-10 rounded-full object-cover">
                <h1 class="text-2xl font-gothic font-bold text-primary">血染钟楼AI</h1>
            </div>
            
            <!-- 搜索框 -->
            <div class="hidden md:flex items-center flex-1 max-w-md mx-8">
                <div class="relative w-full">
                    <input type="text" id="search-input" placeholder="搜索角色名称、特性或提示词..." 
                        class="w-full py-2 pl-10 pr-4 rounded-full bg-dark bg-opacity-50 border border-primary border-opacity-30 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
                    <i class="fa fa-search absolute left-3 top-3 text-gray-400"></i>
                    <button id="clear-search" class="absolute right-3 top-2 text-gray-400 hover:text-white hidden">
                        <i class="fa fa-times-circle"></i>
                    </button>
                </div>
            </div>
            
            <!-- 移动端菜单按钮 -->
            <div class="md:hidden">
                <button id="mobile-menu-button" class="text-light focus:outline-none">
                    <i class="fa fa-bars text-xl"></i>
                </button>
            </div>
            
            <!-- 导航链接 -->
            <div class="hidden md:flex items-center space-x-6">
                <a href="#home" class="text-light hover:text-primary transition-colors">首页</a>
                <a href="#browse" class="text-light hover:text-primary transition-colors">角色浏览</a>
                <a href="https://xueranai.icu" target="_blank" rel="noopener" class="text-light hover:text-primary transition-colors">血染AI问答助手</a>
            </div>
        </nav>
        
        <!-- 移动端菜单 -->
        <div id="mobile-menu" class="md:hidden hidden bg-dark bg-opacity-95 border-b border-primary border-opacity-30 animate-fade-in">
            <div class="container mx-auto px-4 py-3">
                <div class="flex items-center mb-4">
                    <div class="relative w-full">
                        <input type="text" id="mobile-search-input" placeholder="搜索角色名称、特性或提示词..." 
                            class="w-full py-2 pl-10 pr-4 rounded-full bg-dark bg-opacity-50 border border-primary border-opacity-30 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
                        <i class="fa fa-search absolute left-3 top-3 text-gray-400"></i>
                    </div>
                </div>
                <div class="flex flex-col space-y-3">
                    <a href="#home" class="text-light hover:text-primary transition-colors py-2">首页</a>
                    <a href="#browse" class="text-light hover:text-primary transition-colors py-2">角色浏览</a>
                    <a href="https://xueranai.icu" target="_blank" rel="noopener" class="text-light hover:text-primary transition-colors py-2">血染AI问答助手</a>
    
                </div>
            </div>
        </div>
    </header>

    <!-- 主内容区 -->
    <main class="pt-16">
        <!-- 首页英雄区 -->
        <section id="home" class="relative h-screen flex items-center justify-center overflow-hidden">
            <div class="absolute inset-0 z-0">
                <img src="https://p3-flow-imagex-sign.byteimg.com/tos-cn-i-a9rns2rl98/rc/pc/super_tool/efed249705d0402b84af890f3ddf5ee8~tplv-a9rns2rl98-image.image?rcl=20250926100843958069DFA3C52CAADAF1&rk3s=8e244e95&rrcfp=f06b921b&x-expires=1761444570&x-signature=1%2F9%2FTj6bb%2BWvKw6TtH6WboXA%2BBs%3D" 
                    alt="Background" class="w-full h-full object-cover opacity-60">
                <div class="absolute inset-0 bg-gradient-to-b from-dark via-dark via-opacity-70 to-dark"></div>
            </div>
            
            <div class="container mx-auto px-4 z-10 text-center">
                <h1 class="text-4xl md:text-6xl lg:text-7xl font-gothic font-bold text-shadow-lg mb-6 animate-fade-in">
                    <span class="text-primary">血染钟楼</span> AI角色展示
                </h1>
                <p class="text-xl md:text-2xl max-w-3xl mx-auto mb-8 text-gray-300 animate-slide-up">
                    探索由人工智能生成的神秘角色，每个角色都有独特的背景故事和能力
                </p>
                <div class="flex justify-center animate-slide-up" style="animation-delay: 0.2s;">
                    <a href="#browse" class="px-8 py-3 bg-primary hover:bg-primary/80 text-white font-bold rounded-full transition-all transform hover:scale-105">
                        浏览角色
                    </a>
                    <a href="https://xueranai.icu" target="_blank" rel="noopener" class="ml-4 px-8 py-3 bg-primary hover:bg-primary/80 text-white font-bold rounded-full transition-all transform hover:scale-105">
                        血染AI问答助手
                    </a>
                </div>
            </div>
            
            <div class="absolute bottom-10 left-0 right-0 flex justify-center animate-bounce">
                <a href="#featured" class="text-white opacity-70 hover:opacity-100 transition-opacity">
                    <i class="fa fa-chevron-down text-2xl"></i>
                </a>
            </div>
        </section>

        <!-- 精选角色轮播 -->
        <section id="featured" class="py-16 bg-dark">
            <div class="container mx-auto px-4">
                <h2 class="text-3xl md:text-4xl font-gothic font-bold mb-2 text-center">精选角色</h2>
                <p class="text-gray-400 text-center mb-12">探索我们最受欢迎的AI生成角色</p>
                
                <div class="relative">
                    <!-- 轮播控制按钮 -->
                    <button id="prev-slide" class="absolute left-0 top-1/2 -translate-y-1/2 z-10 bg-dark bg-opacity-70 p-2 rounded-full text-white hover:bg-primary transition-colors">
                        <i class="fa fa-chevron-left"></i>
                    </button>
                    <button id="next-slide" class="absolute right-0 top-1/2 -translate-y-1/2 z-10 bg-dark bg-opacity-70 p-2 rounded-full text-white hover:bg-primary transition-colors">
                        <i class="fa fa-chevron-right"></i>
                    </button>
                    
                    <!-- 轮播容器 -->
                    <div id="carousel" class="flex overflow-x-auto scrollbar-hide snap-x snap-mandatory gap-6 pb-6">
                        <!-- 轮播项 - 村民 -->
                        <div class="carousel-item flex-shrink-0 w-full md:w-1/2 lg:w-1/3 snap-center card-hover">
                            <div class="bg-dark bg-opacity-50 rounded-xl overflow-hidden border border-primary border-opacity-20 shadow-lg">
                                <img src="https://p3-flow-imagex-sign.byteimg.com/tos-cn-i-a9rns2rl98/rc/pc/super_tool/4068512e3b0641b0a53632730cd1dbc7~tplv-a9rns2rl98-image.image?rcl=20250926100843958069DFA3C52CAADAF1&rk3s=8e244e95&rrcfp=f06b921b&x-expires=1761444561&x-signature=OVHx6ElWHrwhkOQwMO%2FlGhaY5NQ%3D" 
                                    alt="月影守护者" class="w-full h-64 object-cover">
                                <div class="p-6">
                                    <div class="flex justify-between items-center mb-3">
                                        <h3 class="text-xl font-gothic font-bold">月影守护者</h3>
                                        <span class="px-3 py-1 bg-blue-900 bg-opacity-50 text-blue-300 rounded-full text-sm">村民</span>
                                    </div>
                                    <p class="text-gray-400 mb-4 line-clamp-2">
                                        一位神秘的守夜人，拥有预知危险的能力，能够在夜晚保护村民免受恶魔侵害。
                                    </p>
                                    <button class="view-details w-full py-2 bg-primary bg-opacity-20 hover:bg-opacity-30 text-primary rounded-lg transition-colors" 
                                            data-id="1">
                                        查看详情
                                    </button>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 轮播项 - 外来者 -->
                        <div class="carousel-item flex-shrink-0 w-full md:w-1/2 lg:w-1/3 snap-center card-hover">
                            <div class="bg-dark bg-opacity-50 rounded-xl overflow-hidden border border-primary border-opacity-20 shadow-lg">
                                <img src="https://p3-flow-imagex-sign.byteimg.com/tos-cn-i-a9rns2rl98/rc/pc/super_tool/74af026bfdce4db6889616d3383deeb9~tplv-a9rns2rl98-image.image?rcl=20250926100843958069DFA3C52CAADAF1&rk3s=8e244e95&rrcfp=f06b921b&x-expires=1761444563&x-signature=Sr3fsBnzKPbF5oekHtwjIXh%2F8Vw%3D" 
                                    alt="暗夜伯爵夫人" class="w-full h-64 object-cover">
                                <div class="p-6">
                                    <div class="flex justify-between items-center mb-3">
                                        <h3 class="text-xl font-gothic font-bold">暗夜伯爵夫人</h3>
                                        <span class="px-3 py-1 bg-purple-900 bg-opacity-50 text-purple-300 rounded-full text-sm">外来者</span>
                                    </div>
                                    <p class="text-gray-400 mb-4 line-clamp-2">
                                        一位被诅咒的贵族，她的存在会干扰村民的判断，但她的真实身份始终是个谜。
                                    </p>
                                    <button class="view-details w-full py-2 bg-primary bg-opacity-20 hover:bg-opacity-30 text-primary rounded-lg transition-colors" 
                                            data-id="2">
                                        查看详情
                                    </button>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 轮播项 - 爪牙 -->
                        <div class="carousel-item flex-shrink-0 w-full md:w-1/2 lg:w-1/3 snap-center card-hover">
                            <div class="bg-dark bg-opacity-50 rounded-xl overflow-hidden border border-primary border-opacity-20 shadow-lg">
                                <img src="https://p3-flow-imagex-sign.byteimg.com/tos-cn-i-a9rns2rl98/rc/pc/super_tool/38f834581e3c4b60b478900aed077a48~tplv-a9rns2rl98-image.image?rcl=20250926100843958069DFA3C52CAADAF1&rk3s=8e244e95&rrcfp=f06b921b&x-expires=1761444557&x-signature=PQNfAAkK%2Byn93VbYVeQxd12cMjA%3D" 
                                    alt="时间收割者" class="w-full h-64 object-cover">
                                <div class="p-6">
                                    <div class="flex justify-between items-center mb-3">
                                        <h3 class="text-xl font-gothic font-bold">时间收割者</h3>
                                        <span class="px-3 py-1 bg-yellow-900 bg-opacity-50 text-yellow-300 rounded-full text-sm">爪牙</span>
                                    </div>
                                    <p class="text-gray-400 mb-4 line-clamp-2">
                                        一个神秘的时间旅行者，他能够操纵时间线，制造混乱并帮助恶魔隐藏身份。
                                    </p>
                                    <button class="view-details w-full py-2 bg-primary bg-opacity-20 hover:bg-opacity-30 text-primary rounded-lg transition-colors" 
                                            data-id="3">
                                        查看详情
                                    </button>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 轮播项 - 恶魔 -->
                        <div class="carousel-item flex-shrink-0 w-full md:w-1/2 lg:w-1/3 snap-center card-hover">
                            <div class="bg-dark bg-opacity-50 rounded-xl overflow-hidden border border-primary border-opacity-20 shadow-lg">
                                <img src="https://p3-flow-imagex-sign.byteimg.com/tos-cn-i-a9rns2rl98/rc/pc/super_tool/a76b9e9247494dadb069ff01f96aa8c4~tplv-a9rns2rl98-image.image?rcl=20250926100843958069DFA3C52CAADAF1&rk3s=8e244e95&rrcfp=f06b921b&x-expires=1761444558&x-signature=z8qvb6HEHzzfAMwlhqff8lCptLI%3D" 
                                    alt="深渊领主" class="w-full h-64 object-cover">
                                <div class="p-6">
                                    <div class="flex justify-between items-center mb-3">
                                        <h3 class="text-xl font-gothic font-bold">深渊领主</h3>
                                        <span class="px-3 py-1 bg-red-900 bg-opacity-50 text-red-300 rounded-full text-sm">恶魔</span>
                                    </div>
                                    <p class="text-gray-400 mb-4 line-clamp-2">
                                        来自无尽深渊的恐怖存在，能够操纵人心，每晚吞噬一个村民的灵魂。
                                    </p>
                                    <button class="view-details w-full py-2 bg-primary bg-opacity-20 hover:bg-opacity-30 text-primary rounded-lg transition-colors" 
                                            data-id="4">
                                        查看详情
                                    </button>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 轮播项 - 旅行者 -->
                        <div class="carousel-item flex-shrink-0 w-full md:w-1/2 lg:w-1/3 snap-center card-hover">
                            <div class="bg-dark bg-opacity-50 rounded-xl overflow-hidden border border-primary border-opacity-20 shadow-lg">
                                <img src="https://p3-flow-imagex-sign.byteimg.com/tos-cn-i-a9rns2rl98/rc/pc/super_tool/f9a21cd7d50745ccb4b21f2e60c1bfc2~tplv-a9rns2rl98-image.image?rcl=20250926100843958069DFA3C52CAADAF1&rk3s=8e244e95&rrcfp=f06b921b&x-expires=1761444558&x-signature=zf%2FuA2MI8wRxrvyk6mi8pA6snq8%3D" 
                                    alt="流浪占卜师" class="w-full h-64 object-cover">
                                <div class="p-6">
                                    <div class="flex justify-between items-center mb-3">
                                        <h3 class="text-xl font-gothic font-bold">流浪占卜师</h3>
                                        <span class="px-3 py-1 bg-green-900 bg-opacity-50 text-green-300 rounded-full text-sm">旅行者</span>
                                    </div>
                                    <p class="text-gray-400 mb-4 line-clamp-2">
                                        一个神秘的流浪者，拥有预测未来的能力，但他的到来也可能带来未知的危险。
                                    </p>
                                    <button class="view-details w-full py-2 bg-primary bg-opacity-20 hover:bg-opacity-30 text-primary rounded-lg transition-colors" 
                                            data-id="5">
                                        查看详情
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 轮播指示器（由脚本动态生成） -->
                    <div id="carousel-indicators" class="flex justify-center mt-4 gap-2"></div>
                </div>
            </div>
        </section>

        <!-- 角色浏览区 -->
        <section id="browse" class="py-16 bg-gradient-to-b from-dark to-dark/80">
            <div class="container mx-auto px-4">
                <h2 class="text-3xl md:text-4xl font-gothic font-bold mb-2 text-center">角色浏览</h2>
                <p class="text-gray-400 text-center mb-12">探索所有AI生成的血染钟楼角色</p>
                
                <!-- 分类筛选 -->
                <div class="flex flex-wrap justify-center gap-3 mb-10">
                    <button class="category-filter px-5 py-2 rounded-full bg-primary text-white" data-category="all">
                        全部
                    </button>
                    <button class="category-filter px-5 py-2 rounded-full bg-dark bg-opacity-50 hover:bg-primary/30 transition-colors" data-category="villager">
                        村民
                    </button>
                    <button class="category-filter px-5 py-2 rounded-full bg-dark bg-opacity-50 hover:bg-primary/30 transition-colors" data-category="outsider">
                        外来者
                    </button>
                    <button class="category-filter px-5 py-2 rounded-full bg-dark bg-opacity-50 hover:bg-primary/30 transition-colors" data-category="minion">
                        爪牙
                    </button>
                    <button class="category-filter px-5 py-2 rounded-full bg-dark bg-opacity-50 hover:bg-primary/30 transition-colors" data-category="demon">
                        恶魔
                    </button>
                    <button class="category-filter px-5 py-2 rounded-full bg-dark bg-opacity-50 hover:bg-primary/30 transition-colors" data-category="traveler">
                        旅行者
                    </button>
                </div>
                
                <!-- 角色网格 -->
                <div id="characters-grid" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
                    <!-- 角色卡片 - 村民 -->
                    <div class="character-card card-hover" data-category="villager" data-id="1">
                        <div class="bg-dark bg-opacity-50 rounded-xl overflow-hidden border border-primary border-opacity-20 shadow-lg">
                        <img src="https://p3-flow-imagex-sign.byteimg.com/tos-cn-i-a9rns2rl98/rc/pc/super_tool/4068512e3b0641b0a53632730cd1dbc7~tplv-a9rns2rl98-image.image?rcl=20250926100843958069DFA3C52CAADAF1&rk3s=8e244e95&rrcfp=f06b921b&x-expires=1761444561&x-signature=OVHx6ElWHrwhkOQwMO%2FlGhaY5NQ%3D" 
                                alt="月影守护者" class="w-full h-48 object-contain bg-black">
                            <div class="p-4">
                                <div class="flex justify-between items-center mb-2">
                                    <h3 class="text-lg font-gothic font-bold">月影守护者</h3>
                                    <span class="px-2 py-1 bg-blue-900 bg-opacity-50 text-blue-300 rounded-full text-xs">村民</span>
                                </div>
                                <p class="text-gray-400 text-sm mb-3 line-clamp-2">
                                    一位神秘的守夜人，拥有预知危险的能力，能够在夜晚保护村民免受恶魔侵害。
                                </p>
                                <button class="view-details w-full py-1.5 bg-primary bg-opacity-20 hover:bg-opacity-30 text-primary rounded-lg transition-colors text-sm">
                                    查看详情
                                </button>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 角色卡片 - 外来者 -->
                    <div class="character-card card-hover" data-category="outsider" data-id="2">
                        <div class="bg-dark bg-opacity-50 rounded-xl overflow-hidden border border-primary border-opacity-20 shadow-lg">
                        <img src="https://p3-flow-imagex-sign.byteimg.com/tos-cn-i-a9rns2rl98/rc/pc/super_tool/74af026bfdce4db6889616d3383deeb9~tplv-a9rns2rl98-image.image?rcl=20250926100843958069DFA3C52CAADAF1&rk3s=8e244e95&rrcfp=f06b921b&x-expires=1761444563&x-signature=Sr3fsBnzKPbF5oekHtwjIXh%2F8Vw%3D" 
                                alt="暗夜伯爵夫人" class="w-full h-48 object-contain bg-black">
                            <div class="p-4">
                                <div class="flex justify-between items-center mb-2">
                                    <h3 class="text-lg font-gothic font-bold">暗夜伯爵夫人</h3>
                                    <span class="px-2 py-1 bg-purple-900 bg-opacity-50 text-purple-300 rounded-full text-xs">外来者</span>
                                </div>
                                <p class="text-gray-400 text-sm mb-3 line-clamp-2">
                                    一位被诅咒的贵族，她的存在会干扰村民的判断，但她的真实身份始终是个谜。
                                </p>
                                <button class="view-details w-full py-1.5 bg-primary bg-opacity-20 hover:bg-opacity-30 text-primary rounded-lg transition-colors text-sm">
                                    查看详情
                                </button>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 角色卡片 - 爪牙 -->
                    <div class="character-card card-hover" data-category="minion" data-id="3">
                        <div class="bg-dark bg-opacity-50 rounded-xl overflow-hidden border border-primary border-opacity-20 shadow-lg">
                        <img src="https://p3-flow-imagex-sign.byteimg.com/tos-cn-i-a9rns2rl98/rc/pc/super_tool/38f834581e3c4b60b478900aed077a48~tplv-a9rns2rl98-image.image?rcl=20250926100843958069DFA3C52CAADAF1&rk3s=8e244e95&rrcfp=f06b921b&x-expires=1761444557&x-signature=PQNfAAkK%2Byn93VbYVeQxd12cMjA%3D" 
                                alt="时间收割者" class="w-full h-48 object-contain bg-black">
                            <div class="p-4">
                                <div class="flex justify-between items-center mb-2">
                                    <h3 class="text-lg font-gothic font-bold">时间收割者</h3>
                                    <span class="px-2 py-1 bg-yellow-900 bg-opacity-50 text-yellow-300 rounded-full text-xs">爪牙</span>
                                </div>
                                <p class="text-gray-400 text-sm mb-3 line-clamp-2">
                                    一个神秘的时间旅行者，他能够操纵时间线，制造混乱并帮助恶魔隐藏身份。
                                </p>
                                <button class="view-details w-full py-1.5 bg-primary bg-opacity-20 hover:bg-opacity-30 text-primary rounded-lg transition-colors text-sm">
                                    查看详情
                                </button>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 角色卡片 - 恶魔 -->
                    <div class="character-card card-hover" data-category="demon" data-id="4">
                        <div class="bg-dark bg-opacity-50 rounded-xl overflow-hidden border border-primary border-opacity-20 shadow-lg">
                        <img src="https://p3-flow-imagex-sign.byteimg.com/tos-cn-i-a9rns2rl98/rc/pc/super_tool/a76b9e9247494dadb069ff01f96aa8c4~tplv-a9rns2rl98-image.image?rcl=20250926100843958069DFA3C52CAADAF1&rk3s=8e244e95&rrcfp=f06b921b&x-expires=1761444558&x-signature=z8qvb6HEHzzfAMwlhqff8lCptLI%3D" 
                                alt="深渊领主" class="w-full h-48 object-contain bg-black">
                            <div class="p-4">
                                <div class="flex justify-between items-center mb-2">
                                    <h3 class="text-lg font-gothic font-bold">深渊领主</h3>
                                    <span class="px-2 py-1 bg-red-900 bg-opacity-50 text-red-300 rounded-full text-xs">恶魔</span>
                                </div>
                                <p class="text-gray-400 text-sm mb-3 line-clamp-2">
                                    来自无尽深渊的恐怖存在，能够操纵人心，每晚吞噬一个村民的灵魂。
                                </p>
                                <button class="view-details w-full py-1.5 bg-primary bg-opacity-20 hover:bg-opacity-30 text-primary rounded-lg transition-colors text-sm">
                                    查看详情
                                </button>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 角色卡片 - 旅行者 -->
                    <div class="character-card card-hover" data-category="traveler" data-id="5">
                        <div class="bg-dark bg-opacity-50 rounded-xl overflow-hidden border border-primary border-opacity-20 shadow-lg">
                        <img src="https://p3-flow-imagex-sign.byteimg.com/tos-cn-i-a9rns2rl98/rc/pc/super_tool/f9a21cd7d50745ccb4b21f2e60c1bfc2~tplv-a9rns2rl98-image.image?rcl=20250926100843958069DFA3C52CAADAF1&rk3s=8e244e95&rrcfp=f06b921b&x-expires=1761444558&x-signature=zf%2FuA2MI8wRxrvyk6mi8pA6snq8%3D" 
                                alt="流浪占卜师" class="w-full h-48 object-contain bg-black">
                            <div class="p-4">
                                <div class="flex justify-between items-center mb-2">
                                    <h3 class="text-lg font-gothic font-bold">流浪占卜师</h3>
                                    <span class="px-2 py-1 bg-green-900 bg-opacity-50 text-green-300 rounded-full text-xs">旅行者</span>
                                </div>
                                <p class="text-gray-400 text-sm mb-3 line-clamp-2">
                                    一个神秘的流浪者，拥有预测未来的能力，但他的到来也可能带来未知的危险。
                                </p>
                                <button class="view-details w-full py-1.5 bg-primary bg-opacity-20 hover:bg-opacity-30 text-primary rounded-lg transition-colors text-sm">
                                    查看详情
                                </button>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 角色卡片 - 村民 -->
                    <div class="character-card card-hover" data-category="villager" data-id="6">
                        <div class="bg-dark bg-opacity-50 rounded-xl overflow-hidden border border-primary border-opacity-20 shadow-lg">
                        <img src="https://p11-doubao-search-sign.byteimg.com/labis/da3ee69946a42e64226d029a396a2ef0~tplv-be4g95zd3a-image.jpeg?rk3s=542c0f93&x-expires=1764036539&x-signature=Ha8AhzBMDTEqg7poak1hq8%2Bx2aM%3D" 
                                alt="神秘说书人" class="w-full h-48 object-contain bg-black">
                            <div class="p-4">
                                <div class="flex justify-between items-center mb-2">
                                    <h3 class="text-lg font-gothic font-bold">神秘说书人</h3>
                                    <span class="px-2 py-1 bg-blue-900 bg-opacity-50 text-blue-300 rounded-full text-xs">村民</span>
                                </div>
                                <p class="text-gray-400 text-sm mb-3 line-clamp-2">
                                    一个知道许多秘密的老者，能够在白天分享关于恶魔的线索，但他的信息并不总是可靠。
                                </p>
                                <button class="view-details w-full py-1.5 bg-primary bg-opacity-20 hover:bg-opacity-30 text-primary rounded-lg transition-colors text-sm">
                                    查看详情
                                </button>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 角色卡片 - 外来者 -->
                    <div class="character-card card-hover" data-category="outsider" data-id="7">
                        <div class="bg-dark bg-opacity-50 rounded-xl overflow-hidden border border-primary border-opacity-20 shadow-lg">
                        <img src="https://p3-doubao-search-sign.byteimg.com/labis/image/9de698fc2b4a87c3b8a9081c213f68a9~tplv-be4g95zd3a-image.jpeg?rk3s=542c0f93&x-expires=1764036539&x-signature=wJVuRfUreiVlIKvwjckATLWT86o%3D" 
                                alt="孤独隐士" class="w-full h-48 object-contain bg-black">
                            <div class="p-4">
                                <div class="flex justify-between items-center mb-2">
                                    <h3 class="text-lg font-gothic font-bold">孤独隐士</h3>
                                    <span class="px-2 py-1 bg-purple-900 bg-opacity-50 text-purple-300 rounded-full text-xs">外来者</span>
                                </div>
                                <p class="text-gray-400 text-sm mb-3 line-clamp-2">
                                    一个住在森林边缘的隐士，他的存在会让村民误判恶魔的数量，但他本意是善良的。
                                </p>
                                <button class="view-details w-full py-1.5 bg-primary bg-opacity-20 hover:bg-opacity-30 text-primary rounded-lg transition-colors text-sm">
                                    查看详情
                                </button>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 角色卡片 - 爪牙 -->
                    <div class="character-card card-hover" data-category="minion" data-id="8">
                        <div class="bg-dark bg-opacity-50 rounded-xl overflow-hidden border border-primary border-opacity-20 shadow-lg">
                        <img src="https://p11-doubao-search-sign.byteimg.com/labis/0882a96ec083d949ac06e96d3a680da9~tplv-be4g95zd3a-image.jpeg?rk3s=542c0f93&x-expires=1764036539&x-signature=V3c7Kb3DFWIynMrIMMZj%2BoC%2BLis%3D" 
                                alt="迷惑者" class="w-full h-48 object-contain bg-black">
                            <div class="p-4">
                                <div class="flex justify-between items-center mb-2">
                                    <h3 class="text-lg font-gothic font-bold">迷惑者</h3>
                                    <span class="px-2 py-1 bg-yellow-900 bg-opacity-50 text-yellow-300 rounded-full text-xs">爪牙</span>
                                </div>
                                <p class="text-gray-400 text-sm mb-3 line-clamp-2">
                                    一个能够改变他人记忆的恶魔仆人，他可以让村民混淆信息，保护恶魔不被发现。
                                </p>
                                <button class="view-details w-full py-1.5 bg-primary bg-opacity-20 hover:bg-opacity-30 text-primary rounded-lg transition-colors text-sm">
                                    查看详情
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 分页 -->
                <div class="flex justify-center mt-10">
                    <div class="flex space-x-2">
                        <button class="px-4 py-2 rounded-lg bg-primary text-white">1</button>
                        <button class="px-4 py-2 rounded-lg bg-dark bg-opacity-50 hover:bg-primary/30 transition-colors">2</button>
                        <button class="px-4 py-2 rounded-lg bg-dark bg-opacity-50 hover:bg-primary/30 transition-colors">3</button>
                        <button class="px-4 py-2 rounded-lg bg-dark bg-opacity-50 hover:bg-primary/30 transition-colors">
                            <i class="fa fa-chevron-right"></i>
                        </button>
                    </div>
                </div>
            </div>
        </section>

        
    </main>

    <!-- 角色详情模态框 -->
    <div id="character-modal" class="fixed inset-0 z-50 flex items-center justify-center hidden">
        <div class="absolute inset-0 bg-black bg-opacity-80 backdrop-blur-sm"></div>
        <div class="relative bg-dark bg-opacity-95 rounded-xl max-w-4xl w-full max-h-[90vh] overflow-y-auto p-6 md:p-8 border border-primary border-opacity-30 shadow-2xl animate-fade-in">
            <!-- 关闭按钮 -->
            <button id="close-modal" class="absolute top-4 right-4 text-gray-400 hover:text-white transition-colors z-10" aria-label="关闭">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6">
                    <path fill-rule="evenodd" d="M6.225 4.811a1 1 0 011.414 0L12 9.172l4.361-4.361a1 1 0 111.414 1.414L13.414 10.586l4.361 4.361a1 1 0 01-1.414 1.414L12 12l-4.361 4.361a1 1 0 01-1.414-1.414l4.361-4.361-4.361-4.361a1 1 0 010-1.414z" clip-rule="evenodd"/>
                </svg>
            </button>
            
            <!-- 角色详情内容 -->
            <div id="character-details" class="grid grid-cols-1 md:grid-cols-2 gap-8">
                <!-- 角色图片和视频 -->
                <div class="order-2 md:order-1">
                    <!-- 媒体轮播 -->
                    <div class="relative rounded-lg overflow-hidden mb-4 bg-black bg-opacity-50">
                        <!-- 图片轮播 -->
                        <div id="media-carousel" class="relative aspect-video">
                            <!-- 图片容器 -->
                            <div id="images-container" class="absolute inset-0">
                                <img id="detail-image" src="" alt="角色图片" class="w-full h-full object-contain bg-black">
                            </div>
                            
                            <!-- 视频容器 -->
                            <div id="video-container" class="absolute inset-0 hidden">
                                <video id="detail-video" class="w-full h-full object-contain bg-black" controls>
                                    <source src="" type="video/mp4">
                                    您的浏览器不支持视频播放。
                                </video>
                            </div>
                            
                            <!-- 轮播控制按钮 -->
                            <button id="prev-media" class="absolute left-2 top-1/2 -translate-y-1/2 z-10 bg-black bg-opacity-50 p-2 rounded-full text-white hover:bg-primary transition-colors">
                                <i class="fa fa-chevron-left"></i>
                            </button>
                            <button id="next-media" class="absolute right-2 top-1/2 -translate-y-1/2 z-10 bg-black bg-opacity-50 p-2 rounded-full text-white hover:bg-primary transition-colors">
                                <i class="fa fa-chevron-right"></i>
                            </button>
                            
                            <!-- 媒体指示器 -->
                            <div id="media-indicators" class="absolute bottom-2 left-0 right-0 flex justify-center gap-2">
                                <!-- 动态生成指示器 -->
                            </div>
                            
                            <!-- 媒体类型切换 -->
                            <div id="media-type-toggle" class="absolute top-2 right-2 flex gap-2">
                                <button id="show-images" class="bg-primary text-white p-1 rounded">
                                    <i class="fa fa-image"></i>
                                </button>
                                <button id="show-video" class="bg-black bg-opacity-50 text-white p-1 rounded">
                                    <i class="fa fa-video-camera"></i>
                                </button>
                                <button id="toggle-fullscreen" class="bg-black bg-opacity-50 text-white p-1 rounded" title="全屏显示">
                                    <i class="fa fa-arrows-alt"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 角色基本信息 -->
                    <div class="mb-6">
                        <div class="flex justify-between items-center mb-3">
                            <h3 id="detail-name" class="text-2xl font-gothic font-bold"></h3>
                            <span id="detail-type" class="px-3 py-1 rounded-full text-sm"></span>
                        </div>
                        <div class="flex items-center gap-3 mb-3">
                            <span id="detail-alignment" class="px-3 py-1 rounded-full text-xs"></span>
                            <img id="detail-roleicon" src="" alt="角色图标" class="hidden w-10 h-10 rounded-full object-contain bg-black cursor-pointer" />
                            <a id="detail-rolewiki" href="#" target="_blank" rel="noopener" title="角色百科"
                               class="hidden inline-flex items-center justify-center w-7 h-7 rounded-full bg-black bg-opacity-50 text-white hover:bg-primary transition-colors">
                                <i class="fa fa-wikipedia-w"></i>
                            </a>
                        </div>
                    </div>
                    
                    <!-- 角色能力 -->
                    <div class="mb-6">
                        <h4 class="text-lg font-gothic font-bold mb-2 text-primary">能力</h4>
                        <p id="detail-ability" class="text-gray-400"></p>
                    </div>
                </div>
                
                <!-- 角色故事和其他信息 -->
                <div class="order-1 md:order-2">
                    <!-- 角色故事 -->
                    <div class="mb-6">
                        <h4 class="text-lg font-gothic font-bold mb-2 text-primary">背景故事</h4>
                        <p id="detail-backstory" class="text-gray-300 leading-relaxed"></p>
                    </div>
                    

                    
                    <!-- AI生成提示词 -->
                    <div>
                        <h4 class="text-lg font-gothic font-bold mb-2 text-primary">AI生成提示词</h4>
                        <div class="bg-dark bg-opacity-50 rounded-lg p-4 border border-primary border-opacity-20 relative">
                            <p id="detail-prompt" class="text-gray-400 text-sm whitespace-pre-wrap"></p>
                            <button class="copy-prompt-detail absolute top-2 right-2 text-primary hover:text-primary/80 transition-colors">
                                <i class="fa fa-copy"></i>
                            </button>
                        </div>
                        <div class="copy-success-detail hidden text-center text-green-500 mt-2 text-sm">
                            <i class="fa fa-check"></i> 已复制到剪贴板
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 页脚 -->
    <footer class="bg-dark border-t border-primary border-opacity-30 py-8">
        <div class="container mx-auto px-4">
            <div class="flex flex-col md:flex-row justify-between items-center">
                <div class="flex items-center space-x-2 mb-4 md:mb-0">
                    <img src="https://p3-flow-imagex-sign.byteimg.com/tos-cn-i-a9rns2rl98/rc/pc/super_tool/efed249705d0402b84af890f3ddf5ee8~tplv-a9rns2rl98-image.image?rcl=20250926100843958069DFA3C52CAADAF1&rk3s=8e244e95&rrcfp=f06b921b&x-expires=1761444570&x-signature=1%2F9%2FTj6bb%2BWvKw6TtH6WboXA%2BBs%3D" alt="Logo" class="w-8 h-8 rounded-full object-cover">
                    <h2 class="text-xl font-gothic font-bold text-primary">血染钟楼AI</h2>
                </div>
                
                <div class="flex space-x-6 mb-4 md:mb-0">
                    <a href="#" class="text-gray-400 hover:text-primary transition-colors">
                        <i class="fa fa-github text-xl"></i>
                    </a>
                    <a href="#" class="text-gray-400 hover:text-primary transition-colors">
                        <i class="fa fa-twitter text-xl"></i>
                    </a>
                    <a href="#" class="text-gray-400 hover:text-primary transition-colors">
                        <i class="fa fa-discord text-xl"></i>
                    </a>
                </div>
                
                <div class="text-gray-500 text-sm">
                    &copy; 2025 血染钟楼AI角色展示. 保留所有权利.
                </div>
            </div>
        </div>
    </footer>

    <!-- 内嵌角色数据（避免 file:// 下无法 fetch） -->
    <script>
        window.__EMBEDDED_CHARACTERS__ = [
          {
            "id": 1,
            "name": "小恶魔",
            "type": "demon",
            "typeName": "恶魔",
            "alignment": "evil",
            "alignmentName": "邪恶",
            "images": [
              "./imgs/xiaoemo.jpeg",
            ],
            "video": "",
            "ability": "每晚可以选择保护一名玩家免受恶魔攻击，但无法连续两晚保护同一人。",
            "backstory": "我们必须让自己的头脑保持敏锐，刀刃保持锋利。邪恶在我们之中穿行，想要不择手段地摧毁我们的善良。那些愚蠢之辈，把我们美丽的小镇给毁了。不要相信任何人。但如果你一定要相信某人，请相信我。",
            "prompt": "二次元美少女，血染钟楼主题（侧重哥特悬疑氛围，无血腥元素），维多利亚哥特风格钟楼内景，巨大古钟与外露金属齿轮错落排布，红月光穿透彩色彩绘玻璃，在薄雾与悬浮尘埃中洒下斑驳光影，整体以黑红金为核心配色，营造神秘华丽感；角色造型：身着黑红撞色哥特洛丽塔长裙，裙摆缀有精致蕾丝花边，腰间搭配黑色皮革束带，衣身点缀金属齿轮饰件，外披短款暗纹斗篷，随动作轻扬；头顶小巧圆润的小恶魔角，背后展开半透明蝙蝠翅，身后垂着细长恶魔尾（尾尖为心形），眼眸为明亮红色或鎏金色，长发（黑色或银白色）随钟楼内气流轻轻飘动；角色神态与姿态：面带狡黠灵动的微笑，气质优雅又带着几分神秘疏离感，无危险恐怖指向；采用低机位仰拍、三分构图，角色单脚向前轻迈，一手轻触古钟表面，一手提着带有暗红纹路的金属铃铛（无血迹）；光影与画风：戏剧性高对比光影，红月光形成明显体积光，角色边缘有柔和轮廓光，彩色玻璃光影在地面与衣料上形成斑驳效果，背景采用浅景深虚化处理；整体为高质量动漫插画风格，融合赛璐璐的明快与半厚涂的细腻，发丝层次、布料褶皱清晰可见，金属饰件的冷光质感与皮革的柔软质感刻画到位，细节丰富且视觉精致。",
            "wiki": "https://clocktower-wiki.gstonegames.com/images/thumb/b/b3/Imp.png/200px-Imp.png"
          },
        ];
    </script>

    <!-- JavaScript -->
    <script>
        // 角色数据（由 JSON 加载）
        let characters = [];
        let dataLoaded = false;
        console.log('[BOOT] App script loaded');

        // DOM元素
        const mobileMenuButton = document.getElementById('mobile-menu-button');
        const mobileMenu = document.getElementById('mobile-menu');
        const searchInput = document.getElementById('search-input');
        const mobileSearchInput = document.getElementById('mobile-search-input');
        const clearSearchBtn = document.getElementById('clear-search');
        const categoryFilters = document.querySelectorAll('.category-filter');
        const charactersGrid = document.getElementById('characters-grid');
        const characterModal = document.getElementById('character-modal');
        const closeModal = document.getElementById('close-modal');
        const copyPromptDetailButtons = document.querySelectorAll('.copy-prompt-detail');
        const carousel = document.getElementById('carousel');
        const prevSlideButton = document.getElementById('prev-slide');
        const nextSlideButton = document.getElementById('next-slide');
        let carouselIndicators = [];
        console.log('[BOOT] DOM refs', { hasGrid: !!charactersGrid, hasCarousel: !!carousel, hasModal: !!characterModal });

        // 移动端菜单切换
        mobileMenuButton.addEventListener('click', () => {
            mobileMenu.classList.toggle('hidden');
            console.log('[CLICK] Toggle mobile menu');
        });

        // 搜索功能
        function searchCharacters() {
            const searchTerm = (searchInput.value || mobileSearchInput.value || '').toLowerCase().trim();
            console.log('[SEARCH] term=', searchTerm);
            // 清空时显示全部
            if (!searchTerm) {
                document.querySelectorAll('.character-card').forEach(card => card.classList.remove('hidden'));
                if (clearSearchBtn) clearSearchBtn.classList.add('hidden');
                return;
            }
            // 显示清空按钮
            if (clearSearchBtn) clearSearchBtn.classList.remove('hidden');
            // 过滤
            document.querySelectorAll('.character-card').forEach(card => {
                const name = card.querySelector('h3').textContent.toLowerCase();
                const description = card.querySelector('p').textContent.toLowerCase();
                const id = card.dataset.id;
                const character = characters.find(c => c.id == id);
                const haystack = [
                    name,
                    description,
                    character?.prompt?.toLowerCase?.() || '',
                    character?.typeName?.toLowerCase?.() || '',
                    character?.alignmentName?.toLowerCase?.() || ''
                ].join(' ');
                if (haystack.includes(searchTerm)) {
                    card.classList.remove('hidden');
                } else {
                    card.classList.add('hidden');
                }
            });
        }

        searchInput.addEventListener('input', searchCharacters);
        mobileSearchInput.addEventListener('input', searchCharacters);
        // Enter 键打开第一个匹配项详情
        function openFirstVisibleCard() {
            const first = Array.from(document.querySelectorAll('.character-card')).find(c => !c.classList.contains('hidden'));
            if (!first) return;
            const id = first.dataset.id;
            if (id) showCharacterDetails(id);
        }
        searchInput.addEventListener('keydown', (e) => {
            if (e.key === 'Enter') openFirstVisibleCard();
        });
        mobileSearchInput.addEventListener('keydown', (e) => {
            if (e.key === 'Enter') openFirstVisibleCard();
        });
        // 清空按钮
        if (clearSearchBtn) {
            clearSearchBtn.addEventListener('click', () => {
                searchInput.value = '';
                if (mobileSearchInput) mobileSearchInput.value = '';
                clearSearchBtn.classList.add('hidden');
                searchCharacters();
            });
        }

        // 分类筛选
        categoryFilters.forEach(filter => {
            filter.addEventListener('click', () => {
                // 更新按钮样式
                categoryFilters.forEach(btn => {
                    btn.classList.remove('bg-primary');
                    btn.classList.add('bg-dark', 'bg-opacity-50', 'hover:bg-primary/30');
                });
                filter.classList.remove('bg-dark', 'bg-opacity-50', 'hover:bg-primary/30');
                filter.classList.add('bg-primary');
                
                const category = filter.dataset.category;
                console.log('[FILTER] category=', category);
                
                // 筛选角色
                document.querySelectorAll('.character-card').forEach(card => {
                    if (category === 'all' || card.dataset.category === category) {
                        card.classList.remove('hidden');
                    } else {
                        card.classList.add('hidden');
                    }
                });
            });
        });

        // 动态渲染：精选轮播与角色网格
        function renderFeaturedCarousel() {
            const featured = characters.slice(0, 5);
            console.log('[RENDER] Featured count=', featured.length);
            const slideHtml = featured.map(c => `
                <div class="carousel-item flex-shrink-0 w-full md:w-1/2 lg:w-1/3 snap-center card-hover">
                    <div class="bg-dark bg-opacity-50 rounded-xl overflow-hidden border border-primary border-opacity-20 shadow-lg">
                        <img src="${c.images[0] || ''}" alt="${c.name}" class="w-full h-64 object-contain bg-black">
                        <div class="p-6">
                            <div class="flex justify-between items-center mb-3">
                                <h3 class="text-xl font-gothic font-bold">${c.name}</h3>
                                <span class="px-3 py-1 rounded-full text-sm ${
                                    c.type === 'villager' ? 'bg-blue-900 bg-opacity-50 text-blue-300' :
                                    c.type === 'outsider' ? 'bg-purple-900 bg-opacity-50 text-purple-300' :
                                    c.type === 'minion' ? 'bg-yellow-900 bg-opacity-50 text-yellow-300' :
                                    c.type === 'demon' ? 'bg-red-900 bg-opacity-50 text-red-300' :
                                    'bg-green-900 bg-opacity-50 text-green-300'
                                }">${c.typeName}</span>
                            </div>
                            <p class="text-gray-400 mb-4 line-clamp-2">${c.backstory}</p>
                            <button class="view-details w-full py-2 bg-primary bg-opacity-20 hover:bg-opacity-30 text-primary rounded-lg transition-colors" data-id="${c.id}">查看详情</button>
                        </div>
                    </div>
                </div>
            `).join('');

            carousel.innerHTML = slideHtml;
            console.log('[RENDER] Carousel slides=', document.querySelectorAll('.carousel-item').length);

            // 指示器
            const indicatorsWrap = document.getElementById('carousel-indicators');
            indicatorsWrap.innerHTML = featured.map((_, i) => `
                <button class="carousel-indicator w-3 h-3 rounded-full ${i === 0 ? 'bg-primary' : 'bg-gray-600'}" data-index="${i}"></button>
            `).join('');

            // 更新轮播引用
            slides = document.querySelectorAll('.carousel-item');
            slideCount = slides.length;
            carouselIndicators = document.querySelectorAll('#carousel-indicators .carousel-indicator');
            console.log('[RENDER] Indicators=', carouselIndicators.length);
            carouselIndicators.forEach((indicator, index) => {
                indicator.addEventListener('click', () => goToSlide(index));
            });
        }

        function renderCharactersGrid() {
            const gridHtml = characters.map(c => `
                <div class="character-card card-hover" data-category="${c.type}" data-id="${c.id}">
                    <div class="bg-dark bg-opacity-50 rounded-xl overflow-hidden border border-primary border-opacity-20 shadow-lg">
                        <img src="${c.images[0] || ''}" alt="${c.name}" class="w-full h-48 object-contain bg-black">
                        <div class="p-4">
                            <div class="flex justify-between items-center mb-2">
                                <h3 class="text-lg font-gothic font-bold">${c.name}</h3>
                                <span class="px-2 py-1 rounded-full text-xs ${
                                    c.type === 'villager' ? 'bg-blue-900 bg-opacity-50 text-blue-300' :
                                    c.type === 'outsider' ? 'bg-purple-900 bg-opacity-50 text-purple-300' :
                                    c.type === 'minion' ? 'bg-yellow-900 bg-opacity-50 text-yellow-300' :
                                    c.type === 'demon' ? 'bg-red-900 bg-opacity-50 text-red-300' :
                                    'bg-green-900 bg-opacity-50 text-green-300'
                                }">${c.typeName}</span>
                            </div>
                            <p class="text-gray-400 text-sm mb-3 line-clamp-2">${c.backstory}</p>
                            <button class="view-details w-full py-1.5 bg-primary bg-opacity-20 hover:bg-opacity-30 text-primary rounded-lg transition-colors text-sm">查看详情</button>
                        </div>
                    </div>
                </div>
            `).join('');

            charactersGrid.innerHTML = gridHtml;
            console.log('[RENDER] Grid cards=', document.querySelectorAll('.character-card').length);
        }

        // 角色详情模态框 - 媒体轮播功能
        let currentImageIndex = 0;
        let currentCharacter = null;
        let showingImages = true;
        
        async function ensureCharactersLoaded() {
            if (characters && characters.length > 0) return true;
            try {
                console.warn('[LAZY] characters empty, lazy fetching characters.json');
                const res = await fetch('characters.json');
                console.log('[LAZY] fetch status=', res.status);
                const data = await res.json();
                characters = data || [];
                dataLoaded = characters.length > 0;
                console.log('[LAZY] characters loaded, count=', characters.length);
                // 成功加载后，渲染一次，避免静态卡片与数据不一致
                if (dataLoaded) {
                    renderFeaturedCarousel();
                    renderCharactersGrid();
                }
                return dataLoaded;
            } catch (err) {
                console.error('[LAZY] load characters failed:', err);
                return false;
            }
        }
        
        function updateMediaDisplay() {
            const imagesContainer = document.getElementById('images-container');
            const videoContainer = document.getElementById('video-container');
            const detailImage = document.getElementById('detail-image');
            const detailVideo = document.getElementById('detail-video');
            const mediaIndicators = document.getElementById('media-indicators');
            const showImagesBtn = document.getElementById('show-images');
            const showVideoBtn = document.getElementById('show-video');
            
            // 清除现有指示器
            mediaIndicators.innerHTML = '';
            
            if (showingImages) {
                console.log('[MEDIA] display image index=', currentImageIndex, 'images len=', currentCharacter && currentCharacter.images && currentCharacter.images.length);
                // 显示图片
                imagesContainer.classList.remove('hidden');
                videoContainer.classList.add('hidden');
                
                // 更新按钮样式
                showImagesBtn.classList.remove('bg-black', 'bg-opacity-50');
                showImagesBtn.classList.add('bg-primary');
                showVideoBtn.classList.remove('bg-primary');
                showVideoBtn.classList.add('bg-black', 'bg-opacity-50');
                
                // 设置当前图片
                detailImage.src = currentCharacter.images[currentImageIndex];
                detailImage.alt = `${currentCharacter.name} - 图片 ${currentImageIndex + 1}`;
                
                // 创建图片指示器
                currentCharacter.images.forEach((_, index) => {
                    const indicator = document.createElement('button');
                    indicator.className = `w-2 h-2 rounded-full ${index === currentImageIndex ? 'bg-primary' : 'bg-gray-400'}`;
                    indicator.dataset.index = index;
                    indicator.addEventListener('click', () => {
                        currentImageIndex = index;
                        updateMediaDisplay();
                    });
                    mediaIndicators.appendChild(indicator);
                });
                
                // 如果只有一张图片，隐藏控制按钮
                document.getElementById('prev-media').style.display = currentCharacter.images.length > 1 ? 'block' : 'none';
                document.getElementById('next-media').style.display = currentCharacter.images.length > 1 ? 'block' : 'none';
            } else {
                console.log('[MEDIA] display video, url exists=', !!(currentCharacter && currentCharacter.video));
                // 显示视频
                imagesContainer.classList.add('hidden');
                videoContainer.classList.remove('hidden');
                
                // 更新按钮样式
                showImagesBtn.classList.remove('bg-primary');
                showImagesBtn.classList.add('bg-black', 'bg-opacity-50');
                showVideoBtn.classList.remove('bg-black', 'bg-opacity-50');
                showVideoBtn.classList.add('bg-primary');
                
                // 设置视频源
                detailVideo.src = currentCharacter.video;
                
                // 创建视频指示器
                const videoIndicator = document.createElement('button');
                videoIndicator.className = 'w-2 h-2 rounded-full bg-primary';
                mediaIndicators.appendChild(videoIndicator);
                
                // 隐藏图片控制按钮
                document.getElementById('prev-media').style.display = 'none';
                document.getElementById('next-media').style.display = 'none';
            }
        }
        
        function nextImage() {
            if (currentCharacter && currentCharacter.images.length > 1) {
                currentImageIndex = (currentImageIndex + 1) % currentCharacter.images.length;
                updateMediaDisplay();
                console.log('[MEDIA] next image ->', currentImageIndex);
            }
        }
        
        function prevImage() {
            if (currentCharacter && currentCharacter.images.length > 1) {
                currentImageIndex = (currentImageIndex - 1 + currentCharacter.images.length) % currentCharacter.images.length;
                updateMediaDisplay();
                console.log('[MEDIA] prev image ->', currentImageIndex);
            }
        }
        
        function toggleMediaType() {
            showingImages = !showingImages;
            updateMediaDisplay();
        }
        
        // 绑定媒体控制事件
        document.getElementById('prev-media').addEventListener('click', prevImage);
        document.getElementById('next-media').addEventListener('click', nextImage);
        document.getElementById('show-images').addEventListener('click', () => {
            if (!showingImages) toggleMediaType();
            console.log('[MEDIA] switch to images');
        });
        document.getElementById('show-video').addEventListener('click', () => {
            if (showingImages && currentCharacter && currentCharacter.video) {
                toggleMediaType();
                console.log('[MEDIA] switch to video');
            }
        });
        // 全屏按钮与点击全屏
        const fullscreenBtn = document.getElementById('toggle-fullscreen');
        const mediaRoot = document.getElementById('media-carousel');
        function enterFullscreen(el) {
            if (!el) return;
            if (el.requestFullscreen) el.requestFullscreen();
            else if (el.webkitRequestFullscreen) el.webkitRequestFullscreen();
            else if (el.msRequestFullscreen) el.msRequestFullscreen();
        }
        function exitFullscreen() {
            if (document.exitFullscreen) document.exitFullscreen();
            else if (document.webkitExitFullscreen) document.webkitExitFullscreen();
            else if (document.msExitFullscreen) document.msExitFullscreen();
        }
        function toggleFullscreen() {
            if (document.fullscreenElement) {
                exitFullscreen();
            } else {
                enterFullscreen(mediaRoot);
            }
        }
        if (fullscreenBtn) fullscreenBtn.addEventListener('click', toggleFullscreen);
        // 点击图片或视频也可全屏
        document.getElementById('detail-image').addEventListener('click', () => enterFullscreen(mediaRoot));
        document.getElementById('detail-video').addEventListener('click', () => enterFullscreen(mediaRoot));
        
        // 角色详情模态框
        async function showCharacterDetails(id) {
            console.log('[DETAIL] showCharacterDetails called with id=', id);
            if (!characters || characters.length === 0) {
                const ok = await ensureCharactersLoaded();
                if (!ok) {
                    console.warn('[DETAIL] characters still not loaded. Check if page is opened via file://.');
                }
            }
            currentCharacter = characters.find(c => c.id == id);
            
            if (currentCharacter) {
                console.log('[DETAIL] found character:', currentCharacter.name);
                // 重置媒体状态
                currentImageIndex = 0;
                showingImages = true;
                
                // 填充角色信息
                document.getElementById('detail-name').textContent = currentCharacter.name;
                document.getElementById('detail-type').textContent = currentCharacter.typeName;
                document.getElementById('detail-alignment').textContent = currentCharacter.alignmentName;
                // 百科与角色图标：
                const roleWikiEl = document.getElementById('detail-rolewiki');
                const roleIconEl = document.getElementById('detail-roleicon');
                // 若 wiki 指向图片，则作为图标展示，同时 wiki 链接也保留点击（若你希望显示两者分开，可再加一个字段）。
                if (roleWikiEl) {
                    const isImageUrlForWiki = typeof currentCharacter.wiki === 'string' && /\.(png|jpe?g|gif|webp|svg)(\?|$)/i.test(currentCharacter.wiki);
                    if (currentCharacter.wiki && !isImageUrlForWiki) {
                        roleWikiEl.href = currentCharacter.wiki;
                        roleWikiEl.classList.remove('hidden');
                    } else {
                        roleWikiEl.href = '#';
                        roleWikiEl.classList.add('hidden');
                    }
                }
                if (roleIconEl) {
                    const isImageUrl = typeof currentCharacter.wiki === 'string' && /\.(png|jpe?g|gif|webp|svg)(\?|$)/i.test(currentCharacter.wiki);
                    if (isImageUrl) {
                        roleIconEl.src = currentCharacter.wiki;
                        roleIconEl.classList.remove('hidden');
                    } else if (currentCharacter.icon) {
                        roleIconEl.src = currentCharacter.icon;
                        roleIconEl.classList.remove('hidden');
                    } else {
                        roleIconEl.src = '';
                        roleIconEl.classList.add('hidden');
                    }
                }

                document.getElementById('detail-ability').textContent = currentCharacter.ability;
                document.getElementById('detail-backstory').textContent = currentCharacter.backstory;

                document.getElementById('detail-prompt').textContent = currentCharacter.prompt;
                
                // 更新媒体显示
                updateMediaDisplay();
                
                // 如果没有视频，隐藏视频按钮
                document.getElementById('show-video').style.display = currentCharacter.video ? 'block' : 'none';
                
                // 设置类型和阵营标签样式
                const typeElement = document.getElementById('detail-type');
                const alignmentElement = document.getElementById('detail-alignment');
                
                typeElement.className = 'px-3 py-1 rounded-full text-sm';
                alignmentElement.className = 'px-3 py-1 rounded-full text-xs';
                
                switch (currentCharacter.type) {
                    case 'villager':
                        typeElement.classList.add('bg-blue-900', 'bg-opacity-50', 'text-blue-300');
                        break;
                    case 'outsider':
                        typeElement.classList.add('bg-purple-900', 'bg-opacity-50', 'text-purple-300');
                        break;
                    case 'minion':
                        typeElement.classList.add('bg-yellow-900', 'bg-opacity-50', 'text-yellow-300');
                        break;
                    case 'demon':
                        typeElement.classList.add('bg-red-900', 'bg-opacity-50', 'text-red-300');
                        break;
                    case 'traveler':
                        typeElement.classList.add('bg-green-900', 'bg-opacity-50', 'text-green-300');
                        break;
                }
                
                switch (currentCharacter.alignment) {
                    case 'good':
                        alignmentElement.classList.add('bg-blue-900', 'bg-opacity-50', 'text-blue-300');
                        break;
                    case 'evil':
                        alignmentElement.classList.add('bg-red-900', 'bg-opacity-50', 'text-red-300');
                        break;
                    case 'neutral':
                        alignmentElement.classList.add('bg-gray-900', 'bg-opacity-50', 'text-gray-300');
                        break;
                }
                
                // 显示模态框
                characterModal.classList.remove('hidden');
                document.body.style.overflow = 'hidden';
                console.log('[DETAIL] modal opened');
            }
            else {
                console.warn('[DETAIL] character not found for id=', id);
            }
        }

        // 事件委托：支持动态元素
        carousel.addEventListener('click', (e) => {
            const btn = e.target.closest('.view-details');
            console.log('[EVENT] carousel click target=', e.target, 'btn=', btn, 'id=', btn && btn.dataset.id);
            if (btn && btn.dataset.id) {
                showCharacterDetails(btn.dataset.id);
            }
        });
        charactersGrid.addEventListener('click', (e) => {
            const btn = e.target.closest('.view-details');
            console.log('[EVENT] grid click target=', e.target, 'btn=', btn);
            if (btn) {
                const card = e.target.closest('.character-card');
                const id = (btn.dataset.id) || (card && card.dataset.id);
                console.log('[EVENT] grid resolved id=', id);
                if (id) showCharacterDetails(id);
            }
        });

        closeModal.addEventListener('click', () => {
            characterModal.classList.add('hidden');
            document.body.style.overflow = 'auto';
        });

        // 移除底部关闭按钮逻辑（已取消）

        // 点击模态框外部关闭
        characterModal.addEventListener('click', (e) => {
            if (e.target === characterModal) {
                characterModal.classList.add('hidden');
                document.body.style.overflow = 'auto';
            }
        });

        // 复制提示词
        function copyToClipboard(text, successElement) {
            navigator.clipboard.writeText(text)
                .then(() => {
                    successElement.classList.remove('hidden');
                    setTimeout(() => {
                        successElement.classList.add('hidden');
                    }, 2000);
                })
                .catch(err => {
                    console.error('无法复制文本: ', err);
                });
        }

        copyPromptDetailButtons.forEach(button => {
            button.addEventListener('click', () => {
                const promptText = document.getElementById('detail-prompt').textContent;
                const successElement = button.parentElement.nextElementSibling;
                copyToClipboard(promptText, successElement);
            });
        });

        // 轮播功能
        let currentSlide = 0;
        let slides = [];
        let slideCount = 0;
        
        function goToSlide(index) {
            if (!slides || slides.length === 0) return;
            if (index < 0) index = slideCount - 1;
            if (index >= slideCount) index = 0;
            
            currentSlide = index;
            
            // 移动轮播
            const slideWidth = slides[0].offsetWidth;
            carousel.scrollTo({
                left: slideWidth * currentSlide,
                behavior: 'smooth'
            });
            
            // 更新指示器
            carouselIndicators.forEach((indicator, i) => {
                if (i === currentSlide) {
                    indicator.classList.remove('bg-gray-600');
                    indicator.classList.add('bg-primary');
                } else {
                    indicator.classList.remove('bg-primary');
                    indicator.classList.add('bg-gray-600');
                }
            });
            console.log('[SLIDE] goToSlide ->', currentSlide, '/', slideCount);
        }
        
        prevSlideButton.addEventListener('click', () => {
            console.log('[SLIDE] prev button');
            goToSlide(currentSlide - 1);
        });
        
        nextSlideButton.addEventListener('click', () => {
            console.log('[SLIDE] next button');
            goToSlide(currentSlide + 1);
        });
        
        // 指示器点击在渲染后绑定（见 renderFeaturedCarousel）
        
        // 自动轮播
        setInterval(() => {
            goToSlide(currentSlide + 1);
        }, 5000);

        // 平滑滚动
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function(e) {
                e.preventDefault();
                
                const targetId = this.getAttribute('href');
                const targetElement = document.querySelector(targetId);
                
                if (targetElement) {
                    targetElement.scrollIntoView({
                        behavior: 'smooth'
                    });
                    
                    // 如果是移动端，点击后关闭菜单
                    if (window.innerWidth < 768) {
                        mobileMenu.classList.add('hidden');
                    }
                }
            });
        });

        // 响应式调整
        window.addEventListener('resize', () => {
            // 重新计算轮播位置（空数据保护）
            if (slides && slides[0]) {
            const slideWidth = slides[0].offsetWidth;
            carousel.scrollTo({
                left: slideWidth * currentSlide,
                behavior: 'instant'
            });
            }
        });

        // 初始化：优先使用内嵌数据，其次尝试 JSON（用于线上）
        async function init() {
            try {
                if (Array.isArray(window.__EMBEDDED_CHARACTERS__) && window.__EMBEDDED_CHARACTERS__.length > 0) {
                    characters = window.__EMBEDDED_CHARACTERS__;
                    dataLoaded = true;
                    console.log('[INIT] using embedded characters, count=', characters.length);
                } else {
                    console.log('[INIT] start fetch characters.json');
                    const res = await fetch('characters.json');
                    console.log('[INIT] fetch status=', res.status);
                    const data = await res.json();
                    characters = data;
                    dataLoaded = characters && characters.length > 0;
                    console.log('[INIT] characters loaded, count=', characters.length);
                }
                renderFeaturedCarousel();
                renderCharactersGrid();
                goToSlide(0);
                console.log('[INIT] render done');
            } catch (e) {
                console.error('初始化角色数据失败: ', e);
            }
        }
        init();
    </script>
</body>
</html>
